import React,{useState}  from 'react'
// useState 生成state变量  这些statet变量的修改会引起页面的更新
// 效果类似于 类组件中的state this.state = {xxx:fff, eee:ttt}

export default function Hook() {
  // useState这个函数的返回值是一个数组 返回值中的第一个是变量名 第二个是修改变量的函数
  // useState 唯一的参数就是变量的初始值
  // count以及food叫做state变量 他们更新时会引起页面的更新  普通变量则不会引起更新 解决了函数组件没有state的问题
  let a = 666
  // let val1 = useState(100);   es6的数组解构
  // console.log(val1);
  // let [c1, setC1] = [100, f]
  let [count, setCount] = useState(0)
  // setCount 的使用方式非常类似类组件中的setState()
  let [food, setFood] = useState('rice')
  // 复杂一些的情况
  let [daRenList, setRDL] = useState(['qhy', 'ff']);
  let changeA = ()=>{
    a = 777;
    console.log(a); 
  }
  let addPerson = () => {
    let arr = [...daRenList];
    arr.push('zls');
    setRDL(arr)
  }
  return (
    <div>
        <p>{a}</p>
        <button onClick={()=>changeA()}>change</button>
        <p>使用hook来扩充函数组件的功能，例如：保存状态、生命周期等</p>
        <button onClick={()=>setCount(9)}>{count}</button>
        <p>{food}</p>
        <button onClick={()=>setFood('hotpot')}>不想吃米饭</button>
        <p>{daRenList}</p>
        <button onClick={()=>addPerson()}>新人入队</button>
    </div>
  )
}
